<template>
	<div class="fast-reading-container">
		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="报备信息">
				<p>报备岗位：前端开发</p>
				<p>报备时间：2023-01-01</p>
				<p>报备岗位：报备订单</p>
			</a-collapse-panel>
			<a-collapse-panel key="2" header="期望信息" :collapsible="expectInfo ? '' : 'disabled'">
				<div class="info-container">
					<div class="info-row">
						<div class="info-key">期望城市</div>
						<div class="info-value">{{ expectInfo.expectCity || '--' }}</div>
					</div>
					<div class="info-row">
						<div class="info-key">期望岗位</div>
						<div class="info-value">{{ expectInfo.expectJob || '--' }}</div>
					</div>
					<div class="info-row">
						<div class="info-key">期望薪资</div>
						<div class="info-value">{{ expectInfo.expectSalary || '--' }}</div>
					</div>
				</div>
			</a-collapse-panel>
			<a-collapse-panel key="3" header="工作经历" :collapsible="workExperienceList ? '' : 'disabled'">
				<a-collapse v-model:activeKey="workActiveKey">
					<a-collapse-panel v-for="work in workExperienceList" :key="work.companyName" :header="work.companyName">
						<div class="info-container">
							<div class="info-row">
								<div class="info-key">{{ work.workPost || '--' }}</div>
								<div class="info-value">{{ work.workTime || '--' }}</div>
							</div>
							<div class="info-col">
								<div class="info-key">项目描述</div>
								<div class="info-value">{{ work.workDesc || '--' }}</div>
							</div>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</a-collapse-panel>
			<a-collapse-panel key="4" header="项目经历" :collapsible="projectExperienceList ? '' : 'disabled'">
				<a-collapse v-model:activeKey="projectActiveKey">
					<a-collapse-panel v-for="project in projectExperienceList" :key="project.projectName" :header="project.projectName">
						<div class="info-container">
							<div class="info-row">
								<div class="info-key">{{ project.projectPost || '--' }}</div>
								<div class="info-value">{{ project.projectTime || '--' }}</div>
							</div>
							<div class="info-col">
								<div class="info-key">项目描述</div>
								<div class="info-value">{{ project.projectDesc || '--' }}</div>
							</div>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</a-collapse-panel>
			<a-collapse-panel key="6" header="教育经历" :collapsible="educationExperienceList ? '' : 'disabled'">
				<a-collapse v-model:activeKey="eduActiveKey">
					<a-collapse-panel v-for="edu in educationExperienceList" :key="edu.schoolName" :header="edu.schoolName">
						<div class="info-container">
							<div class="info-col">
								<div class="info-key">就读时间：{{ edu.schoolTime || '--' }}</div>
								<div class="info-value">
									{{ edu.schoolDesc || '--' }}
								</div>
							</div>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</a-collapse-panel>
			<a-collapse-panel key="7" header="自我评价" :collapsible="baseInfo.introduction ? '' : 'disabled'">
				<p>{{ baseInfo.introduction || '--' }}</p>
			</a-collapse-panel>
		</a-collapse>
	</div>
</template>

<script setup>
// ------------------ import ------------------
import { ref, watch, defineProps, computed } from 'vue';
// ------------------ props ------------------
const props = defineProps({
	resume: {
		type: Object,
		default: () => ({})
	}
});
// ------------------ data ------------------
const activeKey = ref(['1']);
const eduActiveKey = ref([]);
const workActiveKey = ref([]);
const projectActiveKey = ref([]);
// ------------------ computed ------------------
const baseInfo = computed(() => {
	return props.resume.baseInfo || {};
});
const expectInfo = computed(() => {
	return props.resume.expectInfo || {};
});
const workExperienceList = computed(() => {
	return props.resume.workExperienceList || [];
});
const projectExperienceList = computed(() => {
	return props.resume.projectExperienceList || [];
});
const educationExperienceList = computed(() => {
	return props.resume.educationExperienceList || [];
});
// ------------------ watch ------------------
watch(activeKey, (val) => {
	console.log(val);
});
// ------------------ methods ------------------
</script>

<style lang="scss">
.ant-collapse-expand-icon {
	transform: rotate(90deg) translateX(12px);
}
.ant-collapse-header {
	flex-direction: row-reverse;
}

.info-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;

	.info-row {
		display: flex;
		justify-content: space-between;
	}

	.info-col {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-key {
		color: #666;
	}

	.info-value {
		color: #333;
		word-break: break-word;
		white-space: pre-wrap;
	}
}
</style>
